/*
bro, like literally
it's not like im programmer or smth
i made it with my paws, and EVEN it's looks like хрень
i don't think u need to copy my code even... cuz why?
here's nothing interesting
*/

html {
    scrollbar-color: #c4a366 #130c04 ;
}

body {
    background: #130c04 url(https://file.garden/aEAN_JpEyxjOispi/Website/img/waves.png);
    background-repeat: repeat-x;
    background-position: center center;
    background-size: contain;
    background-attachment:fixed;
    color: #c4a366;
    font-family: "Times New Roman";
    font-size: normal;
    margin: 0;
}

a {
    color:#ffc9b5; 
}

p {
    background-color: #130c04;
    display: inline-block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    line-height: 18px;
}

.side {
    max-width: 1000px;
    margin-inline: auto;
    margin-top: 4%;
}

.main-side {
    display: grid;
    grid-template-rows:auto auto;
    grid-auto-flow: row;
}

/* --- checks which res user have --- */
/* PC and etc */
@media (width > 950px) { 
    .main-side {
        grid-template-columns: repeat(3, 1fr);
    }
    .headerlogo img {
        height: 4.5em;
    }
}

/* small laptops or tablet */
@media (width < 950px) { 
    .main-side {
        grid-template-columns: repeat(2, 1fr);
    }
    .headerlogo img {
        height: 4.5em;
    }
}

/* phones!! */
@media (width < 800px) { 
    .main-side {
        grid-template-columns: 1fr;
    }
    .headerlogo img {
        height: 3.5em;
    }
}


/* --- for header website --- */
.headerlogo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2em;
}

.headerlogo img {
    width:auto;
    object-fit: cover;
}

/* for BG cool thingy pingy */
.manul-zaza {
    image-rendering: pixelated;
    position: fixed;
    bottom: 180px;
    right: 180px;
    width: 100px;
    height: 100px;
    z-index: -1;
    object-fit: cover;
}

/* --- for boxes --- */

/* box itself */
.box {
    padding: 0.5em 1em;
    overflow-wrap: break-word;
    margin:12px;
}

.box img {
    max-width: 240px;
    height: auto;
    object-fit: cover;
    display: block;
    border: #c4a366 solid 1px;
}

.box .images {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.box .head-text img {
    max-width:100%;
    height:auto;
    width:400px;
    margin-bottom: 2em;
    transform: translate(-1.5em, 1.5em);
    border:0;
    z-index: 1;
}

.full {
    grid-column: 1 / -1;
}